<template>
  <div class="aside" :style="boardStyle">
    <div class="score-board">
      <EvaluationModel
        :showBoard="showBoard"
        :title="title"
        @submit-change="submitScore"
        ref="evaluationRef"
        v-if="correctType === CORRECT_TYPE.ROUGH"
      />
      <ScoreModel
        v-if="correctType === CORRECT_TYPE.SCORE"
        :showBoard="showBoard"
        :totalScore="totalScore"
        :answerType="answerType"
        :title="title"
        ref="scoreRef"
        @submit-change="submitScore"
      />
      <div class="icon">
        <img
          src="@/assets/images/single-correct/drag.svg?url"
          alt=""
          class="drag-icon"
          :class="{ grabbing: isDragging }"
          :draggable="false"
          @mousedown="startDrag"
        />
        <MenuUnfoldOutlined class="unfold-icon" @click="resetTransform" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, computed, nextTick } from 'vue'
import { MenuUnfoldOutlined } from '@ant-design/icons-vue'
import EvaluationModel from './EvaluationModel.vue'
import ScoreModel from './ScoreModel.vue'
import { CORRECT_TYPE } from '@/views/assignment/single-correct/data'

const emit = defineEmits(['submitScore'])
const props = defineProps({
  // 是否等待批改
  showBoard: { type: Boolean, default: false },
  // 评分模式 - 分值还是对错
  correctType: { type: Number, default: 1 },
  // 当前题目的标题
  title: { type: String, default: '' },
  totalScore: { type: Number, default: 0 },
  answerType: { type: String, default: '' }
})

const scoreRef = ref(null)
const evaluationRef = ref(null)
const submitScore = (score, markList = []) => {
  if (markList.length) {
    emit('submitScore', score, markList)
  } else {
    emit('submitScore', score)
  }
}

onMounted(() => {
  handleMouseEvents()
})

const isDragging = ref(false)
const startDrag = () => {
  isDragging.value = true
}
const endDrag = () => {
  isDragging.value = false
}

const handleMouseMove = e => {
  if (!isDragging.value) {
    return
  }
  const { clientX, clientY } = e
  // 给点击事件一个手滑的缓冲区
  if (Math.abs(clientX) < 3 && Math.abs(clientY) < 3) {
    return
  }
  moveScoreBoard({ clientX, clientY })
}

// #region -------拖拽-------
const initBoardTransform = {
  translate: [0, 0]
}
const boardTransform = ref(JSON.parse(JSON.stringify(initBoardTransform)))
const boardStyle = computed(() => {
  const {
    translate: [translateX, translateY]
  } = boardTransform.value
  const transitionStyle =
    translateX === 0 && translateY === 0 ? { transition: '.12s' } : {}

  return {
    transform: `translate(${translateX}px,${translateY}px)`,
    ...transitionStyle
  }
})
let x = 0
let y = 0
const moveScoreBoard = client => {
  if (x !== 0 && y !== 0) {
    let deltaX = client.clientX - x
    let deltaY = client.clientY - y
    const [translateX, translateY] = boardTransform.value.translate
    boardTransform.value.translate = [translateX + deltaX, translateY + deltaY]
  }
  x = client.clientX
  y = client.clientY
}

const resetTransform = () => {
  boardTransform.value = JSON.parse(JSON.stringify(initBoardTransform))
  x = 0
  y = 0
}
// #endregion

// 监听鼠标移动和释放事件
const handleMouseEvents = () => {
  window.addEventListener('mousemove', handleMouseMove)
  window.addEventListener('mouseup', endDrag)
}

// 移除事件监听器
const removeMouseEvents = () => {
  window.removeEventListener('mousemove', handleMouseMove)
  window.removeEventListener('mouseup', endDrag)
}

onBeforeUnmount(() => {
  removeMouseEvents()
})

// 初始化内容
const initData = (scored = -1) => {
  nextTick(() => {
    props.correctType === CORRECT_TYPE.ROUGH
      ? evaluationRef.value.initData(scored)
      : scoreRef.value.initData(scored)
  })
}

defineExpose({ initData })
</script>

<style lang="less" scoped>
.aside {
  flex-shrink: 0;
  height: 806px;
  border: 1px solid #d9d9d9;
  box-sizing: border-box;
  width: 338px;
  border-radius: 3px;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  overflow: auto;
  &::-webkit-scrollbar {
    width: 0;
  }
  .score-board {
    position: relative;
    margin: 0 25px;
    display: flex;
    flex-direction: column;
    .icon {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
    .drag-icon {
      width: 24px;
      height: 24px;
      margin-top: 14px;
      cursor: pointer;
    }
    .unfold-icon {
      width: 20px;
      height: 20px;
      margin-top: 10px;
      margin-left: 10px;
      font-size: 24px;
      color: #8c8c8c;
      cursor: pointer;
      &:hover {
        color: rgba(140, 140, 140, 0.8);
      }
    }
  }
}
</style>
